<template>
	<view class="container">
		<view v-for="(item,index) in coures" :key="index" class="item-list" @click="tabClick(item.id)">
			<view class="img-container">
				<image :src="item.cover"></image>
			</view>
			<view class="right">
				<view class="title">{{item.name}}_{{item.author}}</view>
				<view class="author">作者: {{item.author}}</view>
				<view>{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"course-list",
		props:{
			coures:{
				type:Array,
				default:()=>[]
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			tabClick(id){
				this.$emit('itemClick',id)
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	padding: 32rpx;
	.item-list{
		display: flex;
		border-bottom: 1px solid green;
		margin-bottom: 12rpx;
		.right{
			margin-left: 32rpx;
			
			.title{
				font-size: 32rpx;
				font-weight: 500;
				margin-bottom: 32rpx;
			}
			.author{
				font-size: 30rpx;
					font-weight: 500;
					margin-bottom: 32rpx;
				}
			
		}
		.img-container{
			>image{
				width: 300rpx;
			}
		}
	}
}
</style>